<!-- 开溜吧详情  & 攻略详情 -->
<template>
	<Layout class-name="strategy_detail nav-bgff hideH">
    <fa-navbar :title="type == 1 ? '旅游攻略' : '开吃吧'"></fa-navbar>
    
    <view v-if="banner" class="banner">
    <u-parse :html="banner"></u-parse>
      <!-- <u-swiper :list="banner" height="540" border-radius="0"></u-swiper> -->
    </view>
    
    <view v-if="detail" class=" strategy_detail_box">
      <view class="title f36 b">{{detail.title}}</view>
      <address-map :detail="detail" />
      <view class="intro mb60 mt30">
        <uv-parse :content="detail.content"></uv-parse>
        <!-- <ux-parse :content="detail.content" @navigate="linkOther"></ux-parse> -->
      </view>
    </view>
    <view class="line"></view>
    <comment-box v-if="detail && detail.id" ref="commentRef" @isLast="getIsLast" :type="type" :info-id="detail.id" />
  </Layout>
</template>

<script>
  import fengParse from "@/components/feng-parse/parse.vue"
	export default {
    components:{
                fengParse
            },
		data() {
			return {
				background: ['color1', 'color2', 'color3'],
        indicatorDots: true,
        autoplay: true,
        interval: 2000,
        duration: 500,
        banner:null,
        detail:null,
        k:'说点什么...',
        
        content:'', // 评论内容
        pid:'', // 评论的上一级
        commentList:[],
        activity_id:'',
        focusEd:false,
        page:1,
        isLast:false,
        type:1, // 1-攻略详情，2-开吃吧详情
			}
		},
    onLoad(e){
      this.activity_id = e.id;
      this.type = Number(e.type || 1);
      console.log('提交评论', this.type)
      uni.showLoading();
      const apiFun = this.type === 2 ? this.$api.mukbangDetailApi : this.$api.traveDetailApi;
      apiFun({id: e.id}).then(res=>{
        this.detail = res.data;
        if(res.data.image_text){
          this.banner = `<img src="${res.data.image_text}">`
        }
        uni.hideLoading()
      }).catch(()=>{
        uni.hideLoading()
      });
      
      // this.getCommentList()
    },
		methods: {
      linkOther(e){
        getApp().linkToOther(e)
      },
      getIsLast(e){
        console.log('------------------',e)
        this.isLast = e;
      },
      // 回复
      huifu(id){
        this.pid = id;
        this.focusEd = true;
      },
			submit(data) {
				
        // 
        const apiFun = this.type === 2 ? this.$api.mukbangCommentApi : this.$api.traveCommentApi;
        const _data = this.type === 2 ? {food_id: this.activity_id} : {activity_id: this.activity_id}
        apiFun({
          ...data,
          ..._data,
        }).then(res=>{
          uni.showToast({
            title: res.msg,
            icon:'none'
          });
          this.getCommentList()
        })
			},
      chooseTabId(id){
        this.tabId = id
      },
      getCommentList(){
        // vm.$api.foodCommentApi = async (params={}) => await vm.$u.post(`/api/food_reviews/comment`, params); // 美食 - 主评论接口
        // vm.$api.foodSubCommentApi = async (params={}) => await vm.$u.post(`/api/food_reviews/subComment`, params); // 美食 - 子评论
        // vm.$api.foodCommentListApi = async (params={}) => await vm.$u.get(`/api/food_reviews/commentList`, params); // 美食 - 获取主评论列表
        // vm.$api.foodSubCommentListApi = async (params={}) => await vm.$u.get(`/api/food_reviews/subCommentList`, params); // 美食 - 获取子评论列表
        // vm.$api.foodCommentLikesApi = async (params={}) => await vm.$u.get(`/api/food_reviews/commentLikes`, params); // 美食 - 主评论点赞
        // vm.$api.foodSubCommentLikesApi = async (params={}) => await vm.$u.get(`/api/food_reviews/subCommentLikes`, params); // 美食 - 子评论点赞
        
        
        // vm.$api.travelCommentApi = async (params={}) => await vm.$u.post(`/api/travel_review/comment`, params); // 旅游攻略 - 主评论接口
        // vm.$api.travelSubCommentApi = async (params={}) => await vm.$u.post(`/api/travel_review/subComment`, params); // 旅游攻略 - 子评论
        // vm.$api.travelCommentListApi = async (params={}) => await vm.$u.get(`/api/travel_review/commentList`, params); // 旅游攻略 - 获取主评论列表
        // vm.$api.travelSubCommentListApi = async (params={}) => await vm.$u.get(`/api/travel_review/subCommentList`, params); // 旅游攻略 - 获取子评论列表
        // vm.$api.travelCommentLikesApi = async (params={}) => await vm.$u.get(`/api/travel_review/commentLikes`, params); // 旅游攻略 - 主评论点赞
        // vm.$api.travelSubCommentLikesApi = async (params={}) => await vm.$u.get(`/api/travel_review/subCommentLikes`, params); // 旅游攻略 - 子评论点赞
        // mukbangCommentApi
        const apiFun = this.type === 2 ? this.$api.foodCommentListApi : this.$api.travelCommentListApi;
        const _data = this.type === 2 ? {food_id: this.activity_id} : {activity_id: this.activity_id}
        apiFun({..._data, page: this.page}).then(res=>{
          if(!res.data) return;
          if(res.data.data && res.data.data.length > 0){
            this.commentList = [...this.commentList, ...res.data.data];
          }
          if(this.page === res.data.last_page || res.data.last_page == 0){
            this.isLast = true
          }else{
            this.isLast = false;
            this.page++;
          }
        })
      },
      linkTo(item){
        console.log('进入详情页', item)
        uni.navigateTo({
          url:'/home/match/detail'
        })
      }
		},
    onPageScroll(e) {
      getApp().setNavFixed(this,e)
    },
    onReachBottom() {
      if(this.isLast) return;
      // this.getCommentList()
      this.$refs.commentRef.getCommentList();
    }
	}
</script>
<style>
page{background-color: #fff;}
</style>
<style lang="scss" scoped>
.banner{position: relative; z-index: 1;}
.strategy_detail_box{position: relative; z-index: 40; background-color: #fff; margin-top: -40rpx; border-radius: 30rpx 30rpx 0 0 ; padding: 0 30rpx;}
.typeTab{
  padding: 30rpx 0 16rpx; border-bottom: 1px solid #EEEEEE; margin-bottom: 20rpx;
  .item{
    display: flex; align-items: center; justify-content: center; height: 60rpx; padding: 0 30rpx; border-radius: 60rpx; margin-right: 30rpx; 
    &.on{background-color: #4FAD95; color: #fff;}
  }
  
}
.swiper{
  height: 560rpx;
  .img{width: 100%; height: 560rpx; display: block;}
}
.strategy_detail_box{
  .title{padding: 40rpx 0 46rpx;}
  .map{width: 100%; height: 85rpx;}
  .tit{display: flex; align-items: center; font-size: 28rpx; font-weight: bold; margin-bottom: 24rpx;}
  
}
.line{width: 100%; height: 10rpx; background-color: #FAFAFA;}


.comment{
  .comment-tit{padding: 40rpx 0 36rpx;}
  .tips{color: #888; font-size: 24rpx; text-align: center; padding: 60rpx 0;}
  .text{background-color: #F5F6F8; border-radius: 40rpx; height: 64rpx; width: 100%; padding: 0 16rpx; font-size: 24rpx;}
  
  .comment-list{
    margin-top: 28rpx;
    .item{
      padding-bottom: 20rpx; border-bottom: 1px solid #ededed;
      .item{margin-left: 85rpx;}
      .intro{margin-top: 8rpx; font-size: 26rpx; color: #000; margin-bottom: 20rpx;}
    }
  }
}

</style>
